<template>
	<div class="my-content-charts-item-box">
		<!-- 每一项组件的渲染 -->
		<template v-for="item in menuOptions" :key="item.title">
			<div
				class="item-box flex-col"
				draggable="true"
				@dragstart="(e) => dragStartHandle(e, item)"
				@dragend="dragendHandle"
				@dblclick="dblclickHandle(item)"
			>
				<div class="list-header">
					<my-icon icon="MoreFilled" :size="20" color="#E6A23C" />
					<el-text class="list-header-text" truncated>{{ item.title }}</el-text>
				</div>
				<div class="list-center flex-center h0 f1">
					<el-image v-if="item.orgConfig.image" class="list-img" :src="item.orgConfig.image" loading="lazy" />
					<my-icon v-else :icon="item.orgConfig.icon || 'Postcard'" class="list-img f-s-30" color="#999" />
				</div>
			</div>
		</template>
	</div>
</template>

<script setup>
import { addEdit } from '@/views/chart/hooks/component.hook';
import { JSONStringify } from '@/utils';

defineProps({
	menuOptions: {
		type: Array,
		default: () => []
	}
});

// 拖拽处理
const dragStartHandle = (e, item) => {
	// 将配置项绑定到拖拽属性上
	e.dataTransfer.setData('ChartData', JSONStringify(omit(item, ['image'])));
	// 修改状态
	$store.chart.editCanvas.isCreate = true;
};

// 拖拽结束
const dragendHandle = () => {
	$store.chart.editCanvas.isCreate = false;
};

// 双击添加
const dblclickHandle = async (item) => {
	try {
		loadingStart();
		// 添加编辑区组件
		addEdit(item);
		loadingFinish();
	} catch (error) {
		loadingError();
		msgWarning(`图表正在研发中, 敬请期待...`);
	}
};
</script>

<style lang="scss" scoped>
@include b('content-charts-item-box') {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 6px;
	padding: 6px;
	transition: var(--el-transition-all);
	.item-box {
		transition: var(--el-transition-all);
		position: relative;
		margin: 0;
		width: calc(33.3% - 4px);
		overflow: hidden;
		border-radius: 6px;
		cursor: pointer;
		border: 1px solid rgba(0, 0, 0, 0);
		background-color: var(--color-bg-2);
		&:hover {
			border-color: var(--color-bg-4);
			.list-img {
				transform: scale(1.1);
				img {
					pointer-events: none;
				}
			}
		}
		.list-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 2px 5px;
			background-color: var(--color-bg-3);
			&-text {
				font-size: 12px;
				margin-left: 8px;
				user-select: none;
			}
		}
		.list-center {
			padding: 3px;
			overflow: hidden;
			font-size: 0;
			.list-img {
				width: 100%;
				border-radius: 6px;
				object-fit: contain;
				transition: all 0.4s;
				img {
					pointer-events: none;
				}
			}
		}
	}
}
</style>
